<div class="input-question">
	<?php
		$options = array();
		for (
			$i = $cq->data['ScaledQuestion']['lower_limit']; 
			$i <= $cq->data['ScaledQuestion']['upper_limit']; 
			$i += $cq->data['ScaledQuestion']['precision']
		) {
			$options[$i] = $i;
		}
		echo $this->TwitterBootstrap->input(sprintf('Question-%s', $cq->data['Question']['id']), array(
			'label' => $cq->data['Question']['label'],
			'help_block' => $cq->data['Question']['help_text'],
			'required' => $cq->data['Question']['required'] ? 'required' : '',
			'options' => $options,
			'class' => 'ScaledQuestion',
		));
	?>
	<span id='<?php echo sprintf("slider-display-%s", $cq->data['Question']['id']); ?>'></span>
</div>

<script type="text/javascript">
	var lol = null;
	$(function() {
	    var select = $( <?php echo sprintf('"#Question-%s"', $cq->data['Question']['id']); ?> );
	    lol = select;
	    var slider = $( "<div id='slider-<?php echo sprintf("question-%s", $cq->data['Question']['id']); ?>'></div>" ).insertAfter( select ).slider({
	      min: parseInt(select.children("option").first().val()),
	      max: parseInt(select.children("option").last().val()),
	      step: <?php echo $cq->data['ScaledQuestion']['precision']; ?>,
	      range: "min",
	      value: select[ 0 ].value,
	      slide: function( event, ui ) {
	        select[ 0 ].value = ui.value;
	        $( <?php echo sprintf('"#slider-display-%s"', $cq->data['Question']['id']); ?> ).html(select[0].value + "&nbsp;/&nbsp" + select.children("option").last().val());
	      }
	    });

	    $(select).hide();

	    $( <?php echo sprintf('"#slider-display-%s"', $cq->data['Question']['id']); ?> ).html(select[0].value + "&nbsp;/&nbsp" + select.children("option").last().val());
  	});
</script>